<template>
    <div class="icon-box">
        <el-input ref="inputRef" v-model="valueIcon" v-bind="$attrs" :placeholder="placeholder" :clearable="clearable" @clear="clearIcon" @click="openDialog">
            <template #append>
                <el-button :icon="customIcons[valueIcon]" />
            </template>
        </el-input>
        <el-dialog v-model="dialogVisible" :title="placeholder" top="50px" width="66%">
            <el-input v-model="inputValue" placeholder="搜索图标" size="large" :prefix-icon="Icons.Search" />
            <el-scrollbar v-if="Object.keys(iconsList).length">
                <div class="icon-list">
                    <div v-for="item in iconsList" :key="item" class="icon-item" @click="selectIcon(item)">
                        <component :is="item"></component>
                        <span>{{ item.name }}</span>
                    </div>
                </div>
            </el-scrollbar>
            <el-empty v-else description="未搜索到您要找的图标~" />
        </el-dialog>
    </div>
</template>

<script setup lang="ts" name="SelectIcon">
import * as Icons from "@element-plus/icons-vue";

interface SelectIconProps {
    iconValue: string;
    clearable?: boolean;
    placeholder?: string;
}

const {
    iconValue = "",
    clearable = true,
    placeholder = "请选择图标",
} = defineProps<SelectIconProps>();

const inputRef = ref();
const valueIcon = ref(iconValue);

// open Dialog
const dialogVisible = ref(false);
const openDialog = () => (dialogVisible.value = true);

// 选择图标(触发更新父组件数据)
const emit = defineEmits<{
    "update:iconValue": [value: string];
}>();

const selectIcon = (item: any) => {
    dialogVisible.value = false;
    valueIcon.value = item.name;
    emit("update:iconValue", item.name);
    setTimeout(() => inputRef.value.blur(), 0);
};

// 清空图标
const clearIcon = () => {
    valueIcon.value = "";
    emit("update:iconValue", "");
    setTimeout(() => inputRef.value.blur(), 0);
};

// 监听搜索框值
const inputValue = ref("");
const customIcons: { [key: string]: any } = Icons;
const iconsList = computed((): { [key: string]: any } => {
    if (!inputValue.value) return Icons;
    let result: { [key: string]: any } = {};
    for (const key in customIcons) {
        if (key.toLowerCase().indexOf(inputValue.value.toLowerCase()) > -1)
            result[key] = customIcons[key];
    }
    return result;
});
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>